<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
import { ref, reactive, readonly } from 'vue'
// 值不能设置为只读，设置对象才行
const state = readonly({ count: 100 })

function change() {
    console.log(state);
    state.count++
}
</script>

<template>
    <h1>组合式 API</h1>
    <h1>
        {{ state.count }}
    </h1>
    <button @click="change">修改</button>

</template>
